/*
 * customer权限下淘宝商品详情
 * @Author: ljb
 * @Date: 2018-03-27 17:53:27
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-06-05 11:47:02
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .ivu-form-item-content {
        img {
            width: 150px;
        }
    }

</style>
<template>
	<div class="v-customer-taobao-detail">

		<Form
			ref="formValidate"
			:label-width="90"
			:model="formValidate">

			<Form-item
				:label="$t('product.title')"
				prop="title">
				<i-input
					v-model="formValidate.title"
					:placeholder="$t('product.please_enter_title')"/>
			</Form-item>

			<Form-item
				:label="$t('product.tb_product_link')">
				<i-input
					v-model="formValidate.pic"
					:placeholder="$t('product.please_enter_tb_link')"/>
				<img
					v-if="formValidate.pic"
					:src="formValidate.pic"
					:alt="$t('common.none')"
					class="preview-image">
			</Form-item>

			<Form-item
				:label="$t('product.tb_price')"
				prop="promo_price">
				<i-input
					v-model="formValidate.promo_price"
					:placeholder="$t('product.please_enter_tb_price')"/>
			</Form-item>

			<Form-item
				:label="$t('product.origin_price')"
				prop="price" >
				<i-input
					v-model="formValidate.price"
					:placeholder="$t('product.please_enter_origin_price')"/>
			</Form-item>

			<Form-item
				:label="$t('product.sell_count')"
				prop="sell_count">
				<i-input
					v-model="formValidate.sell_count"
					:placeholder="$t('product.please_enter_sell_count')"/>
			</Form-item>

			<Form-item>
				<Button
					type="primary"
					@click="comfirmDetail">
					{{ $t('common.confirm') }}
				</Button>
			</Form-item>

		</Form>

	</div>
</template>

<script>


export default {

	name: 'TaobaoDetail',

	props: {
		taobaoItem: {
			type: Object,
			default() {
				return {};
			},
		},
		showTaobaoModal: {
			type: Boolean,
			default() {
				return false;
			},
		},
	},

	data() {
		return {

			formValidate: {

				title: '',

				pic: '',

				promo_price: '',

				price: '',

				sell_count: '',

			},

			taobao_product_info: {


			},


			// 上传的缩略图信息
			image_info: {
				name: '',
				url: '',
			},

		};
	},

	watch: {

		taobaoItem() {
			if (this.taobaoItem) {
				this.taobao_product_info = this.taobaoItem;

				this.initData(this.taobao_product_info);
			}
		},


	},

	methods: {

		/**
         * @function {初始化数据}
         * @param  {type} record {传入的对象}
         * @return {undefined}
         */
		initData(record) {
			this.formValidate.title = record.title || '';

			this.formValidate.pic = record.pic || '';

			this.formValidate.promo_price = record.promo_price || '';

			this.formValidate.price = record.price || '';

			this.formValidate.sell_count = record.sell_count || '';

			this.image_info.url = record.pic;
		},


		/**
         * @function {确定淘宝商品详情信息}
         * @return {undefined}
         */
		comfirmDetail() {
			const new_object = {

				title: this.formValidate.title,

				promo_price: this.formValidate.promo_price,

				price: this.formValidate.price,

				sell_count: this.formValidate.sell_count,

				pic: this.formValidate.pic,

			};

			this.$emit('comfirmTaoBaoDetail', new_object);
		},


	},
};
</script>
